<template>
  <a-modal v-model:open="isShow" title="编辑" @cancel="handleCancel" style="width: 700px">
    <a-form
        :model="trackFormState"
        :label-col="{span: 7}"
        class="track-form"
    >
      <a-row>
        <a-col :span="24">
          <a-form-item ref="loadingTime" label="装柜时间" name="loadingTime">
            <span>{{ trackFormState.shipTime }}</span>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="etdDate" label="预计离港时间(ETD)" name="etdDate">
            <a-date-picker v-model:value="trackFormState.etdDate" value-format="YYYY-MM-DD" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="atdDate" label="实际离港时间(ATD)" name="atdDate">
            <a-date-picker v-model:value="trackFormState.atdDate" value-format="YYYY-MM-DD" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="etaDate" label="预计到港时间(ETA)" name="etaDate">
            <a-date-picker v-model:value="trackFormState.etaDate" value-format="YYYY-MM-DD" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="ataDate" label="实际到港时间(ATA)" name="ataDate">
            <a-date-picker v-model:value="trackFormState.ataDate" value-format="YYYY-MM-DD" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="unloadContainerTime" label="卸船日期" name="unloadContainerTime">
            <a-date-picker v-model:value="trackFormState.unloadContainerTime" value-format="YYYY-MM-DD" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="arrivalWarehouseTime" label="送仓日期" name="arrivalWarehouseTime">
            <a-date-picker v-model:value="trackFormState.arrivalWarehouseTime" value-format="YYYY-MM-DD" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="uploadGoodsTime" label="卸货日期" name="uploadGoodsTime">
            <a-date-picker v-model:value="trackFormState.uploadGoodsTime" value-format="YYYY-MM-DD" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="shelvesAddedTime" label="开始上架时间" name="shelvesAddedTime">
            <a-date-picker v-model:value="trackFormState.shelvesAddedTime" value-format="YYYY-MM-DD" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <template #footer>
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" :loading="btnLoading" @click="handleOk">确定</a-button>
    </template>
  </a-modal>
</template>
<script setup>
import { ref, computed, defineProps,reactive, defineEmits,watch } from 'vue'
import {message} from "ant-design-vue";
import {editDetailShippingTime, editShippingTrack} from "@/api/firstShipping/shippingMessage.js";
const props = defineProps({
  openTruck:{
    type:Boolean,
  },
  baseInfo:{
    type:Object,
  }
})
const trackFormState = ref({})

const emit = defineEmits(['close'])
const isShow = computed(()=>{
  return props.openTruck
})
const btnLoading = ref(false)
const handleCancel = () => {
  emit('close','truck')
}
const handleOk = async () => {
  try{
    btnLoading.value = true
    const res = await editDetailShippingTime(trackFormState.value)
    message.success('修改成功')
    emit('close','truck')
  }catch (e){
    message.error(e)
  }finally {
    btnLoading.value = false
  }
}
watch(()=>isShow.value,(val)=>{
  if(val){
      trackFormState.value = {...props.baseInfo}
  }
  console.log(trackFormState.value)
})
</script>
<style scoped lang="less">
.track-form{
  .ant-picker{
    width: 100%;
  }
}
</style>
